<!--
 * @Date: 2022-04-22 14:47:36
 * @Author: 陶子
 * @LastEditTime: 2022-09-28 16:51:27
 * @FilePath: \jk_one-stop_cloud_mobile_v1.0\src\views\warehouseManagement\inventoryQuery\outAndInDetail.vue
 * @pageName: 这是--(新建出入库单详情)--页面
-->
<template>
  <div class="recordDetail">
    <Navbar :appTitle='detailType=="outStock"?"出库单详情":"入库单详情"' />
    <!--头部-->
    <div class="d-head">
      <div class="content">
        <div class="left">
          <div class="title">{{ detailInfo.orderNumber }}</div>
          <div class="row limitRow" style="margin-top:0.1rem">
            <span class="r-label limitLabel">任务标题：</span>
            <span class="r-column limitColumn">{{ detailInfo.taskName || '--' }}</span>
          </div>
          <div class="row" style="margin-top:0.1rem">
            <span class="r-label">创建人：</span>
            <span class="r-column">{{ detailInfo.createBy || "--" }}</span>
          </div>
          <div class="status" style="margin-right: 0.1rem">
            {{ detailInfo.operateTaskType }}
          </div>
          <div class="status" style="margin-right: 0.1rem" v-if="detailInfo.detailDelNum>0">
            有删除
          </div>
        </div>
      </div>
    </div>
    <!-- taps-->
    <div class="tabs-f">
      <div style="background:#fff">
        <div style="width:50%">
          <van-tabs v-model="tabActive">
            <van-tab :title='detailType=="outStock"?"出库信息":"入库信息"'></van-tab>
            <van-tab :title='detailType=="outStock"?"出库明细":"入库明细"'></van-tab>
          </van-tabs>
        </div>
      </div>
      <div v-show="tabActive==0">
        <div class="infoTopBox">
          <div class="itemTopInfo"><span class="spanLeft">{{detailType=='outStock'?"出库人":"入库人"}}：</span><span
              class="spanRight">{{ detailInfo.operateUserName || '--'}}</span></div>
          <div class="itemTopInfo"><span class="spanLeft">{{detailType=='outStock'?"出库仓库":"入库仓库"}}：</span><span
              class="spanRight">{{ detailInfo.warehouseName || '--' }}</span></div>
          <div class="itemTopInfo"><span class="spanLeft">{{detailType=='outStock'?"出库日期":"入库日期"}}：</span><span
              class="spanRight">{{ detailInfo.operateTime|| '--'}}</span></div>
          <div class="itemTopInfo"><span class="spanLeft">提交时间：</span><span class="spanRight">{{ detailInfo.createTime || '--' }}</span></div>
        </div>
        <div class="infoBotBox">
          <div class="remarkBox">
            <div class="leftRemark">{{detailType=='outStock'?"出库原因":"入库原因"}}：</div>
            <div class="rightRemark">{{detailInfo.remark}}</div>
          </div>
          <div class="remarkBox" style="margin-bottom:0">
            <div class="leftRemark" style="width:0.45rem">附件：</div>
            <div class="rightRemark">
              <upload iconType="fj" :showUpload="false" :fileIds="detailInfo.dingFileInfo"></upload>
            </div>
          </div>
        </div>
      </div>
      <div class="listBox" v-show="tabActive==1">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <van-cell v-for="(item,index) in reportList" :key="index" style="margin-top:0.1rem">
            <div class="goodBox">
              <IMG class="goodLeft" :attachment='item.attachment'></IMG>
              <div class="goodRight">
                <div class="gooodName">{{item.goodsName}}</div>
                <div class="gooodCode"><span class="codeBefore">物品编号：</span><span class="goodAfter">{{item.goodsCode}}</span></div>
                <div class="goodSpec"><span class="specBefore">规格：</span><span class="specAfter">{{item.spec}}</span></div>
                <div class="numberBox">
                  <div class="numTopBox">
                    <div class="topTop">{{detailType=="outStock"?"出库合格品":"入库合格品"}}</div>
                    <div class="topBot">{{item.goodsQualifiedNum}}{{item.assistUnit}}</div>
                  </div>
                  <div class="numTopBox">
                    <div class="topTop">{{detailType=="outStock"?"出库报废品":"入库报废品"}}</div>
                    <div class="topBot">{{item.goodsScrapNum}}{{item.assistUnit}}</div>
                  </div>
                </div>
                <div class="numberBox">
                  <div class="numTopBox">
                    <div class="topTop">{{detailType=="outStock"?"出库合格品(F)":"入库合格品(F)"}}</div>
                    <div class="topBot">{{item.goodsQualifiedNumTextAssistUnit||'--'}}</div>
                  </div>
                  <div class="numTopBox">
                    <div class="topTop">{{detailType=="outStock"?"出库报废品(F)":"入库报废品(F)"}}</div>
                    <div class="topBot">{{item.goodsScrapNumTextAssistUnit||'--'}}</div>
                  </div>
                </div>
                <div class="haveBox">
                  <div class="haveColor" v-if="item.isDeleteText">{{item.isDeleteText}}</div>
                </div>
              </div>
            </div>
          </van-cell>
        </van-list>
      </div>
    </div>
  </div>
</template>

<script>
import Navbar from "@/components/navBar/navBar_right";
import { queryByIdApi, queryListApi } from "@/api/mobile";
import { apiBaseUrlDownload } from "@/utils/request";
import upload from "@/components/upload/upload";

import IMG from "./IMG";
export default {
  name: "customerDetail", //客户详情
  components: { Navbar, upload, IMG },
  data() {
    return {
      apiBaseUrlDownload,
      imgUrlList: [],
      /*** */
      tabActive: 0,
      parentId: "",
      detailInfo: {},
      current: 1,
      pageSize: 15,
      loading: false,
      finished: false,
      reportList: [],
    };
  },
  computed: {},
  mounted() {},
  created() {
    this.detailType = this.$route.query.detailType;
    this.parentId = this.$route.query.id;
    this.getDetail();
  },
  methods: {
    // 获取详情
    getDetail() {
      let obj = {
        id: this.parentId,
      };
      queryByIdApi(obj).then((res) => {
        if (res.success) {
          if (res.result) {
            this.detailInfo = res.result;
          }
        } else {
          this.$toast(res.message);
        }
      });
      let reportObj = {
        pageNo: this.current,
        pageSize: this.pageSize,
      };
      this.getReportData(reportObj);
    },
    //获取报工记录数据
    getReportData(obj) {
      let params = {
        ...obj,
        id: this.parentId,
      };
      this.loading = true;
      queryListApi(params).then((res) => {
        if (res.success) {
          let resGood = res.result.records;
          if (resGood.length < this.pageSize) {
            this.finished = true;
          } else {
            this.current += 1;
            this.finished = false;
          }
          this.reportList = this.reportList.concat(resGood);
          this.loading = false;
        } else {
          this.$toast(res.message);
        }
      });
    },
    onLoad() {
      console.log("这里执行了");
      let reportObj = {
        pageNo: this.current,
        pageSize: this.pageSize,
      };
      this.getReportData(reportObj);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/views/workManagement/materialRequisition/materialDetail.scss";
.content {
  margin-left: 0 !important;
}
// 盘点物品样式

.left {
  width: 3.4rem !important;
}
.recordDetail {
  position: relative;
}
.tabs-f {
  position: relative;
  top: 1.53rem;
}
.infoTopBox {
  background-color: #fff;
  box-sizing: border-box;
  padding: 0.16rem;
  margin-top: 0.1rem;
  .itemTopInfo {
    margin-top: 0.1rem;
    font-size: 0.14rem;
    color: #888888;
    display: flex;
    &:nth-child(1) {
      margin-top: 0;
    }
    .spanLeft {
    }
    .spanRight {
      color: #191f25;
    }
  }
}
div.infoBotBox {
  background-color: #fff;
  box-sizing: border-box;
  padding: 0.16rem;
  margin-top: 0.1rem;
  div.remarkBox {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: 0.14rem;
    color: #888888;
    display: flex;
    margin-bottom: 0.1rem;
    div.leftRemark {
      width: 0.7rem;
    }

    div.rightRemark {
      flex: 1;
      color: #191f25;
    }
  }
}
.listBox {
  height: calc(100vh - 2.5rem);
  overflow: auto;
}
div.goodBox {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  padding: 0.06rem 0;
  img.goodLeft {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 0.02rem;
  }

  div.goodRight {
    flex: 1;
    margin-left: 0.1rem;
    div.gooodName {
      width: 90%;
      font-size: 0.16rem;
      font-weight: 500;
      color: #191f25;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      margin-bottom: 0.1rem;
    }

    div.gooodCode {
      margin-bottom: 0.1rem;
      span.codeBefore {
        font-size: 0.14rem;
        color: #888888;
      }

      span.goodAfter {
        font-size: 0.16rem;
        color: #191f25;
      }
    }

    div.goodSpec {
      margin-bottom: 0.1rem;
      span.specBefore {
        font-size: 0.14rem;
        color: #888888;
      }

      span.specAfter {
        font-size: 0.16rem;
        color: #191f25;
      }
    }

    div.numberBox {
      box-sizing: border-box;
      padding: 0.1rem 0;
      border-top: 0.01rem solid #f0f0f0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      div.numTopBox {
        flex: 1;
        div.topTop {
          font-size: 0.14rem;
          color: #888888;
          margin-bottom: 0.1rem;
        }

        div.topBot {
          font-size: 0.16rem;
          color: #191f25;
        }
      }
    }
  }
}
.limitRow {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  .limitLabel {
    // width: 0.8rem;
  }
  .limitColumn {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.haveBox {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.haveColor {
  box-sizing: border-box;
  padding: 0.02rem 0.05rem;
  background-color: #ffe9e9;
  color: #ff3b84;
  margin-top: 0.06rem;
}
</style>
